<template>
  <div class="rdetail" v-if="playlist.name">
    <twoHead :title="playlist.name">
      <van-icon size="24" name="ellipsis" />
    </twoHead>
    <div class="topbg" :style="'background:url(' + playlist.coverImgUrl + ') no-repeat center'"></div>
    <div class="mask"></div>
    <div class="rtop">
      <img class="left" :src="playlist.coverImgUrl" alt="" />
      <div class="right">
        <p class="r-tit">{{ playlist.name }}</p>
        <div class="user">
          <img :src="playlist.creator.avatarUrl" alt="" />
          <span>{{ playlist.creator.nickname }}</span>
        </div>
        <p class="van-ellipsis">{{ playlist.description }}</p>
      </div>
    </div>
    <div class="btm">
        <div class="btm-tit" @click="playList(0)">
            <div class="btm-l">
              <van-icon name="play-circle" size="24" color="#f00" />
              <h5>播放全部</h5>
              <span class="btm-count">({{playlist.trackCount}})</span>
            </div>
            <div class="btm-r">
              <van-icon name="down" size="24" />
              <van-icon name="passed" size="24"/>
            </div>
        </div>
        <div class="btm-con" v-if="show">
          <div class="btm-con-item" @click="playList(index)" v-for="(v,index) in list" :key="index">
            <p class="btm-con-item-num">
              <van-icon class="s-icon" color="#c20c0c" v-if="current==index&&lxx"  name="volume-o" />
              <span v-else>{{index+1}}</span>
            </p>
            <div class="btm-con-item-info">
              <h5 class="van-ellipsis">{{v.txt}}</h5>
              <p class="van-ellipsis">{{v.name}}</p>
            </div>
            <van-icon name="share-o" size="18" />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";

export default {
  data() {
    return {
      playlist: {},
      ids:[],
      songids:[],
      list:[],
      show:false,
      lxx:false,
    };
  },
  computed:{
    ...mapState(['current','first'])
  },
  methods:{
    ...mapMutations(['setList','setSxy','setCurrent','setShowPlayer']),
    playList(i){
      this.setSxy(true);
      this.lxx = true;
      this.setList(this.list);
      this.setCurrent(i);
      this.setShowPlayer(true)
    }
  },
  mounted() {
    this.$ajax.getSongId(this.$route.params).then((res) => {
      this.playlist = res.playlist;
      res.playlist.trackIds.forEach(item=>this.ids.push(item.id));
      this.$ajax.getMusic({ids:this.ids.join(',')}).then(res=>{
        res.songs.forEach(item=>this.songids.push(item.id));
        res.songs.forEach((item,i)=>{
          this.list[i]={txt:item.name,pic:'',name:'',url:''};
          this.list[i].pic = item.al.picUrl.replace(/^\/\d\.jpg$/,item.al.pic_str);
          item.ar.forEach(value=>{
            this.list[i].name +=  value.name+'/';
          })
          this.list[i].name = this.list[i].name.slice(0,this.list[i].name.length-1)
        })

        this.$ajax.getMusicUrl({id:this.songids.join(',')}).then(res=>{
          res.data.forEach(item=>{
            this.songids.forEach((value,i)=>{
              if(value == item.id){
                this.list[i].url = item.url;
                this.show = true;
              }
            })
          })

        })
      })
    });
  },
};
</script>

<style lang="scss" scoped>
.van-ellipsis{
  width: 90%;
}
.btm{
    position: absolute;
    z-index: 1;
    width: 100%;
    background: #fefefe;
    color:#000;
    padding-bottom: 45px;
    &-con{
      padding:10px 20px;
      &-item{
        h5{
          font-weight: normal;
        }
        p{
          color: #666;
        }
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align-last: left;
        &-num{
          font-size: 16px;
          color: #999;
        }
        &-info{
          width: 80%;
        }
      }
    }
    h5{
      font-size: 14px;
    }
    &-count{
      font-size: 12px;
      color:#999;
    }
    &-tit{
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
    }
    &-l{
      width: 35%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-r{
      width: 15%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
}
.topbg {
  width: 100%;
  height: 100%;
  filter: blur(15px);
  position: absolute;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,0.3);
}
.rdetail {
  padding-top: 46px;
  position: relative;
}
.rtop {
  padding: 40px 20px;
  position: relative;
  width: 100%;
  height: 30%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  .left {
    width: 35%;
    height: 10%;
    border-radius: 10px;
  }
  .right {
    width: 60%;
    padding: 10px 0;
    text-align: left;
    .r-tit{
        color: #fff;
        font-size: 16px;
    }
    .user{
        padding: 10px 0;
        display: flex;
        align-items: center;
        img{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 5px;
        }
        span{
            color: #ccc;
            font-size: 12px;
        }
    }
    .van-ellipsis{
        font-size: 12px;
        color: #ccc;
    }
  }
}
</style>